<template>
  <div class>
    <MyHeader />
    <div class="main">
      <!-- 循环创建组件，并且将数据传入给每个组件 -->
      <MyGoods v-for="obj in list " :key="obj.id" :obj1="obj" />
    </div>
    <!-- 将数组传入到计算的组件 -->
    <MyFooter :arr="list" />
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader.vue";
import MyGoods from "./components/MyGoods.vue";
import MyFooter from "./components/MyFooter.vue";
export default {
  name: "",
  data() {
    return {
      list: []
    };
  },
  // 在一开始的时候就调用这个函数
  created() {
    this.fn();
  },
  methods: {
    fn() {
      this.$axios({
        method: "GET",
        url: "/api/cart"
      }).then(res => (this.list = res.data.list));
    }
  },
  components: {
    MyHeader,
    MyGoods,
    MyFooter
  }
  // 1.发送请求数据
};
</script>

<style scoped>
.main {
  padding: 40px 0px 45px 0px;
}
</style>
